<div class="pcast-player">
  <div class="pcast-player-controls">
    <button class="pcast-play"><i class="fa fa-play"></i><span>Play</span></button>
    <button class="pcast-pause"><i class="fa fa-pause"></i><span>Pause</span></button>
    <button class="pcast-rewind"><i class="fa fa-fast-backward"></i><span>Rewind</span></button>
    <span class="pcast-currenttime pcast-time">00:00</span>
    <progress class="pcast-progress" value="0"></progress>
    <span class="pcast-duration pcast-time">00:00</span>
    <button class="pcast-speed">1x</button>
    <button class="pcast-mute"><i class="fa fa-volume-up"></i><span>Mute/Unmute</span></button>
  </div>
  <audio src="http://s3.amazonaws.com/ShopTalk/080_rapidfire_19.mp3"></audio><a class="pcast-download" href="http://s3.amazonaws.com/ShopTalk/080_rapidfire_19.mp3" download>Download MP3</a>
</div>

<p>Sample functionality I'd like from an HTML5 podcast player. Icons from <a href="http://fortawesome.github.io/Font-Awesome/icons/">Font Awesome</a>. Audio from <a href="http://shoptalkshow.com">shoptalkshow.com</a>


/****************************************/

body {
  font-size: 0.925em;
  padding: 3%;
}
body a {
  color: #09c;
}
body a:hover, body a:focus, body a:active {
  color: #069;
}

.visually-hidden, .pcast-player button span {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

/* Pcast Player */
.pcast-player .pcast-player-controls {
  box-sizing: border-box;
  background: #000;
  color: #fff;
  font-size: 14px;
  height: 42px;
  overflow: hidden;
  padding: 5px;
}
.pcast-player button {
  background: #2a2a2a;
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: 5px;
  line-height: 22px;
  -webkit-appreance: none;
  min-width: 32px;
}
.pcast-player progress {
  height: 13px;
  width: calc(100% - 281px);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.pcast-player progress[value]::-webkit-progress-bar {
  background-color: #555;
  border-radius: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.pcast-player progress[value]::-webkit-progress-value {
  background: #fff;
}
.pcast-player .pcast-time {
  display: inline-block;
  font-size: 13px;
  padding: 0 5px;
  text-align: center;
  width: 4em;
}
.pcast-player .pcast-speed {
  width: 2.5em;
}
.pcast-player .pcast-download {
  font-size: 12px;
  margin-top: 0.5em;
  display: inline-block;
  color: black;
}
.pcast-player .pcast-download:hover, .pcast-player .pcast-download:focus {
  color: #666;
}


/**********************************/
(function(){

  var pcastPlayers = document.querySelectorAll('.pcast-player');
  var speeds = [ 1, 1.5, 2, 2.5, 3 ]    
  
  for(i=0;i<pcastPlayers.length;i++) {
    var player = pcastPlayers[i];
    var audio = player.querySelector('audio');
    var play = player.querySelector('.pcast-play');
    var pause = player.querySelector('.pcast-pause');
    var rewind = player.querySelector('.pcast-rewind');
    var progress = player.querySelector('.pcast-progress');
    var speed = player.querySelector('.pcast-speed');
    var mute = player.querySelector('.pcast-mute');
    var currentTime = player.querySelector('.pcast-currenttime');
    var duration = player.querySelector('.pcast-duration');
    
    var currentSpeedIdx = 0;

    pause.style.display = 'none';
    
    var toHHMMSS = function ( totalsecs ) {
        var sec_num = parseInt(totalsecs, 10); // don't forget the second param
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (hours   < 10) {hours   = "0"+hours; }
        if (minutes < 10) {minutes = "0"+minutes;}
        if (seconds < 10) {seconds = "0"+seconds;}
        
        var time = hours+':'+minutes+':'+seconds;
        return time;
    }
    
    audio.addEventListener('loadedmetadata', function(){
      progress.setAttribute('max', Math.floor(audio.duration));
      duration.textContent  = toHHMMSS(audio.duration);
    });
    
    audio.addEventListener('timeupdate', function(){
      progress.setAttribute('value', audio.currentTime);
      currentTime.textContent  = toHHMMSS(audio.currentTime);
    });
    
    play.addEventListener('click', function(){
      this.style.display = 'none';
      pause.style.display = 'inline-block';
      pause.focus();
      audio.play();
    }, false);

    pause.addEventListener('click', function(){
      this.style.display = 'none';
      play.style.display = 'inline-block';
      play.focus();
      audio.pause();
    }, false);
 
    rewind.addEventListener('click', function(){
      audio.currentTime -= 30;
    }, false);
    
    progress.addEventListener('click', function(e){
      audio.currentTime = Math.floor(audio.duration) * (e.offsetX / e.target.offsetWidth);
    }, false);

    speed.addEventListener('click', function(){
      currentSpeedIdx = currentSpeedIdx + 1 < speeds.length ? currentSpeedIdx + 1 : 0;
      audio.playbackRate = speeds[currentSpeedIdx];
      this.textContent  = speeds[currentSpeedIdx] + 'x';
      return true;
    }, false);

    mute.addEventListener('click', function() {
      if(audio.muted) {
        audio.muted = false;
        this.querySelector('.fa').classList.remove('fa-volume-off');
        this.querySelector('.fa').classList.add('fa-volume-up');
      } else {
        audio.muted = true;
        this.querySelector('.fa').classList.remove('fa-volume-up');
        this.querySelector('.fa').classList.add('fa-volume-off');
      }
    }, false);
  }
})(this);